<!--词云-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  import WordCloudChart from './WordCloudChart'

  import 'echarts-wordcloud'

  const _this = {
    name: 'WordCloudChart', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '2.1',
      configDataTemp: Object.assign({

        // 组件相关配置属性，Echarts图表组件的相关配置属性，必须在chartOption对象下定义
        chartOption: {
          title: PnDesigner.buildTitleConfigData(),
          global: {
            gridSize: 10,
            shape: 'circle',
            sizeRange: [10, 40],
            rotationRange: [0, 0],
            textStyle: {
              emphasis: {
                shadowBlur: 0,
                shadowColor: '#fff'
              }
            },
          },

          series: [
            WordCloudChart.buildSeriesObj('#2196f3'),
            WordCloudChart.buildSeriesObj('#64b5f6'),
            WordCloudChart.buildSeriesObj('#1565c0')
          ]
        }

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'label',
            remark: '类目'
          },
          {
            field: 'value',
            remark: '值'
          }
        ],
        ds_resultObj: [
          {name: "雨伞", value: 30},
          {name: "晴天", value: 28},
          {name: "电话", value: 24},
          {name: "手机", value: 23},
          {name: "下雨", value: 22},
          {name: "暴雨", value: 21},
          {name: "多云", value: 20},
          {name: "雨衣", value: 29},
          {name: "屋檐", value: 28},
          {name: "大风", value: 27},
          {name: "台风", value: 26},
          {name: "下雪", value: 25},
          {name: "打雷", value: 24},
          {name: "小雨", value: 30},
          {name: "中雨", value: 18},
          {name: "大雨", value: 14},
          {name: "雷阵雨", value: 13}
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: true, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration([
        PnDesigner.buildFuncCompInteractionStreamItem('itemClick', [
          PnDesigner.buildFuncCompInteractionFieldsMapItem('name', '', '类目'),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('value', '', '值')
        ])
      ]))
    },
    data() {
      return {}
    },
    mounted() {
      this.init();

      this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
        this.init()
      })
    },
    methods: {
      init() { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode(this.launchInteractionStream)
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode(this.launchInteractionStream)
        });
      },

      launchInteractionStream (params) {
        this.$PnDesigner.launchInteractionStream(this.component.compConfigData, 'itemClick', params.data)
      }
    },
    computed: {
      chartOption() {

        let option = {
          title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
          tooltip: {
            show: true,
            position: 'top'
          },
          series: [
            {
              type: "wordCloud",
              // 网格大小，各项之间间距
              gridSize: this.component.compConfigData.chartOption.global.gridSize,
              // 形状 circle 圆，cardioid  心， diamond 菱形，
              // triangle-forward 、triangle 三角，star五角星
              shape: this.component.compConfigData.chartOption.global.shape,
              // 字体大小范围
              sizeRange: this.component.compConfigData.chartOption.global.sizeRange,
              // 文字旋转角度范围
              rotationRange: this.component.compConfigData.chartOption.global.rotationRange,
              // 旋转步值
              rotationStep: 90,
              // 自定义图形
              // maskImage: maskImage,
              left: 'center',
              top: 'center',
              right: null,
              bottom: null,
              // 画布宽
              width: '100%',
              // 画布高
              height: '100%',
              // 是否渲染超出画布的文字
              drawOutOfBound: false,
              textStyle: {
                // normal: {
                //   color: function () {
                //     return 'rgb(' + [
                //       Math.round(Math.random() * 200 + 55),
                //       Math.round(Math.random() * 200 + 55),
                //       Math.round(Math.random() * 200 + 55)
                //     ].join(',') + ')';
                //   }
                // },
                emphasis: {
                  shadowBlur: this.component.compConfigData.chartOption.global.textStyle.emphasis.shadowBlur,
                  shadowColor: this.component.compConfigData.chartOption.global.textStyle.emphasis.shadowColor
                }
              },
              data: [

              ]
            }
          ]
        };

        this.runCustomFilter(this.component.compConfigData.ds_resultObj).forEach((item, index) => {
          option.series[0].data.push(Object.assign({
            textStyle: {
              color: this.component.compConfigData.chartOption.series[this.$PnUtil.getRandomNum(0, this.component.compConfigData.chartOption.series.length -1)].color
            }
          }, item))
        });

        return option;
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
